<template>
  <div class="tpl20-top">
    <div class="modulePadding">
      <div
        class="header20_wrap"
        :style="`padding-top:${tplItemData.modulePadding}px;padding-bottom:${tplItemData.modulePadding}px;`">
        <div
          class="header_style20_top"
          :style="`background-image:url(${tplItemData.bg});`">
          <div
            class="style20_button"
            :style="`top:${tplItemData.button.top}px`">
            <!-- TODO 后台链接需修改 -->
            <a @click="openLink(tplItemData.button.link)">{{ tplItemData.button.showtitle }}</a>
          </div>
          <div
            class="style20_title"
            :style="`color:${tplItemData.titleColor}`">{{ tplItemData.title }}</div>
          <div
            class="style20_con"
            :style="`color:${tplItemData.subTitleColor}`">{{ tplItemData.subTitle }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { openPage } from '@/utils/utils'
export default Vue.extend({
  props: {
    tplItemData: {
      type: Object // 传入参数的类型
    }
  },
  methods: {
    // TODO 小程序跳转
    openLink(link) {
        openPage(link)
    }
  }
})
</script>

<style lang="scss">
.tpl20-top{
  .header_style20_top{
    position:relative;
    height:500px;
    padding:60px 0 300px;
    background-size:100% 100%;
    line-height:1.35;
    .style20_button{
      width:180px;
      height: 48px;
      line-height: 48px;
      border:2px solid #a2c777;
      border-radius:4px;
      text-align: center;
      font-size: 24px;
      position: absolute;
      top: 25%;
      left: 50%;
      margin-left: -90px;
      a{
        display: block;
        color: #a2c777;
        width: 100%;
      }
    }
    .style20_title{
      color: #000000;
      font-size: 50px;
      font-weight:normal;
      text-align: center;
    }
    .style20_con{
      text-align: center;
      color: #999999;
      padding: 20px 0;
      font-size: 24px;
    }
  }
}
</style>
